<template>
    <div class="submit-success">
        <!-- 顶部导航栏 -->
        <van-nav-bar title="提交结果" left-arrow @click-left="onBack">
            <template #right>
                <div class="nav-icons">
                    <span class="dot"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                    <span class="circle-btn"></span>
                </div>
            </template>
        </van-nav-bar>

        <div class="success-container">
            <!-- 成功图标 -->
            <div class="success-icon">
                <div class="icon-circle">
                    <div class="checkmark"></div>
                </div>
            </div>

            <!-- 成功信息 -->
            <div class="success-info">
                <h2 class="success-title">提交成功</h2>
                <p class="success-message">您的评价已提交成功,感谢您的反馈</p>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <van-button type="primary" size="large" block round @click="fillAnother" class="fill-another-btn">
                    再填一份
                </van-button>

                <div class="return-link" @click="goHome">
                    返回
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();

const onBack = () => {
    router.back();
};

const fillAnother = () => {
    // 跳转到问卷列表
    router.push('/questionnaire-list');
};

const goHome = () => {
    // 返回首页
    router.push('/home');
};
</script>

<style scoped>
.submit-success {
    min-height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.success-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

/* 导航栏图标 */
.nav-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot {
    width: 6px;
    height: 6px;
    background: #d8d8d8;
    border-radius: 50%;
    display: inline-block;
}

.circle-btn {
    width: 18px;
    height: 18px;
    border: 1.5px solid #d8d8d8;
    border-radius: 50%;
    display: inline-block;
    margin-left: 6px;
}

/* 成功图标 */
.success-icon {
    margin-bottom: 32px;
}

.icon-circle {
    width: 80px;
    height: 80px;
    background: #20b2aa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.checkmark {
    width: 40px;
    height: 20px;
    border: 3px solid #fff;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
    position: absolute;
    top: 25px;
    left: 18px;
}

/* 成功信息 */
.success-info {
    text-align: center;
    margin-bottom: 48px;
}

.success-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.success-message {
    font-size: 16px;
    color: #999;
    margin: 0;
    line-height: 1.5;
}

/* 操作按钮 */
.action-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.fill-another-btn {
    height: 48px;
    font-size: 18px;
    font-weight: 500;
    background: #338aff;
    border: none;
    box-shadow: 0 4px 12px rgba(51, 138, 255, 0.3);
    width: 100%;
    max-width: 300px;
}

.fill-another-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(51, 138, 255, 0.3);
}

.return-link {
    font-size: 16px;
    color: #999;
    cursor: pointer;
    padding: 8px 16px;
    transition: color 0.2s;
}

.return-link:hover {
    color: #666;
}

.return-link:active {
    color: #333;
}

/* 响应式设计 */
@media (max-width: 375px) {
    .success-title {
        font-size: 22px;
    }

    .success-message {
        font-size: 15px;
    }

    .fill-another-btn {
        font-size: 16px;
        height: 44px;
    }
}
</style>